<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>证书管理</el-breadcrumb-item>
      <el-breadcrumb-item>统计数据</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <h3 class="title">筛选条件:</h3>
      <el-divider></el-divider>
      <el-row class="filterItem">
        <el-col :span="2" class="itemLabel">检测方法：</el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="LiscenseName" size="medium" @change="queryChange">
            <el-checkbox-button v-for="liscense in LiscenseNameList" :label="liscense.name" :key="liscense.id">
              {{ liscense.name }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>

      <el-row class="filterItem">
        <el-col :span="2" class="itemLabel">检测等级：</el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="LiscenseLevel" size="medium" @change="queryChange">
            <el-checkbox-button v-for="level in LiscenseLevelList" :label="level.level" :key="level.id">
              {{ level.level }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>

      <el-row class="filterItem">
        <el-col :span="2" class="itemLabel">发证机构：</el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="LiscenseOrgan" size="medium" @change="queryChange">
            <el-checkbox-button v-for="organ in LiscenseOrganList" :label="organ.organ" :key="organ.id">
              {{ organ.organ }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>

      <el-row class="filterItem">
        <el-col :span="2" class="itemLabel">成员公司：</el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="Company" size="medium" @change="queryChange">
            <el-checkbox-button v-for="company in CompanyList" :label="company.c_shortname" :key="company.id">
              {{ company.c_shortname }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        LiscenseNameStr: '',
        LiscenseLevelStr: '',
        LiscenseOrganStr: '',
        CompanyStr: ''
      },
      LiscenseName: [],
      LiscenseLevel: [],
      LiscenseOrgan: [],
      Company: [],
      LiscenseNameList: [],
      LiscenseLevelList: [],
      LiscenseOrganList: [],
      CompanyList: []
    }
  },
  created() {
    this.getFilterBaseinfo()
  },
  methods: {
    // 获取查询的参数列表
    async getFilterBaseinfo() {
      const { data: res } = await this.$http.get('baseinfo/filterinfo/')
      if (res.meta.status !== 200) {
        return this.$message.error('获取查询的基本信息失败')
      }
      this.LiscenseNameList = res.data.liscense_name
      this.LiscenseLevelList = res.data.liscense_level
      this.LiscenseOrganList = res.data.liscense_organ
      this.CompanyList = res.data.company
    },

    async getLiscenseData() {
      this.queryInfo.LiscenseNameStr = this.LiscenseName.join(',')
      this.queryInfo.LiscenseLevelStr = this.LiscenseLevel.join(',')
      this.queryInfo.LiscenseOrganStr = this.LiscenseOrgan.join(',')
      this.queryInfo.CompanyStr = this.Company.join(',')
      console.log(this.queryInfo)
      // 发起请求，请求liscense统计数据
      const { data: res } = await this.$http.get('liscense/liscensetab/', { params: this.queryInfo })
      console.log(res)
    },

    queryChange(newValue) {
      // console.log(newValue)
      // console.log(this.LiscenseName)
      this.getLiscenseData()
    }
  }
}
</script>

<style lang='less' scoped>
.title {
  font-size: 20px;
  font-weight: 400;
  color: #646464;
}
.itemLabel {
  text-align: right;
  color: #646464;
  line-height: 32px;
}
.filterItem {
  margin-bottom: 10px;
}
</style>